<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>数据上传 - 智能水产养殖系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body class="bg-light">

<div class="container py-4">
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="text-primary">
                <i class="bi bi-upload"></i> 数据上传
            </h2>
            <p class="text-muted">上传CSV格式的水质数据文件</p>
        </div>
    </div>

    <!-- 消息提示 -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <div class="row">
        <div class="col-md-8">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-file-earmark-arrow-up"></i> 上传数据文件</h5>
                </div>
                <div class="card-body">
                    <form action="{{ url_for('upload_file') }}" method="POST" enctype="multipart/form-data" id="uploadForm">
                        <div class="mb-3">
                            <label for="file" class="form-label">选择CSV文件</label>
                            <input type="file" name="file" id="file" class="form-control" accept=".csv" required>
                            <div class="form-text">支持的文件格式：CSV (.csv)</div>
                        </div>
                        
                        <div class="mb-3">
                            <button type="submit" class="btn btn-primary" id="uploadBtn">
                                <i class="bi bi-upload"></i> 上传文件
                            </button>
                            <button type="button" class="btn btn-outline-secondary ms-2" onclick="clearForm()">
                                <i class="bi bi-arrow-clockwise"></i> 重置
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card shadow">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i class="bi bi-info-circle"></i> 文件格式说明</h5>
                </div>
                <div class="card-body">
                    <h6>支持的列名：</h6>
                    <ul class="list-unstyled">
                        <li><i class="bi bi-check-circle text-success"></i> <code>temperature</code> - 水温 (℃)</li>
                        <li><i class="bi bi-check-circle text-success"></i> <code>ph</code> - pH值</li>
                        <li><i class="bi bi-check-circle text-success"></i> <code>dissolved_oxygen</code> - 溶解氧 (mg/L)</li>
                        <li><i class="bi bi-check-circle text-success"></i> <code>fish_count</code> - 鱼群数量</li>
                    </ul>
                    
                    <h6 class="mt-3">示例CSV格式：</h6>
                    <div class="bg-light p-2 rounded">
                        <small>
                            temperature,ph,dissolved_oxygen,fish_count<br>
                            22.5,7.2,8.5,150<br>
                            23.1,7.1,8.3,148<br>
                            21.8,7.3,8.7,152
                        </small>
                    </div>
                </div>
            </div>

            <div class="card shadow mt-3">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0"><i class="bi bi-exclamation-triangle"></i> 注意事项</h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li><i class="bi bi-dot text-warning"></i> 文件大小不超过10MB</li>
                        <li><i class="bi bi-dot text-warning"></i> 确保CSV文件格式正确</li>
                        <li><i class="bi bi-dot text-warning"></i> 数值数据应为数字格式</li>
                        <li><i class="bi bi-dot text-warning"></i> 上传后数据将显示在主页</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-12 text-center">
            <a href="{{ url_for('user_home') }}" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> 返回主页
            </a>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 文件上传处理
document.getElementById('uploadForm').addEventListener('submit', function(e) {
    const fileInput = document.getElementById('file');
    const uploadBtn = document.getElementById('uploadBtn');
    
    if (!fileInput.files[0]) {
        e.preventDefault();
        alert('请选择要上传的文件');
        return;
    }
    
    // 检查文件类型
    const fileName = fileInput.files[0].name;
    if (!fileName.toLowerCase().endsWith('.csv')) {
        e.preventDefault();
        alert('请选择CSV格式的文件');
        return;
    }
    
    // 显示上传中状态
    uploadBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> 上传中...';
    uploadBtn.disabled = true;
});

// 清除表单
function clearForm() {
    document.getElementById('file').value = '';
    document.getElementById('uploadBtn').innerHTML = '<i class="bi bi-upload"></i> 上传文件';
    document.getElementById('uploadBtn').disabled = false;
}

// 文件选择时显示文件名
document.getElementById('file').addEventListener('change', function(e) {
    const fileName = e.target.files[0]?.name;
    if (fileName) {
        console.log('选择的文件:', fileName);
    }
});
</script>

</body>
</html>
